iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Modern Web

30天學網頁設計系列 第 13

Day13 hover應用(二)

  • 分享至 

  • xImage
  •  

hover + positon

  • 讓圖片或是區塊移動
.article-content img:first-child{ 
position: absolute;  
top: 0px;
left: 0px;
}
.article:hover .article-content img:first-child{
right: 0px;  
left: auto;
}
  • 也可以定義當滑鼠經過時,圖片位移幾個像素,例如 left: 50px; 就是往右位移50像素,如果覺得板面太雜亂大多是因為側欄的關係,可以減少側欄元件,讓版面乾淨一點,但有些部落格需要的元件較多無法刪減,而伸縮側欄就是一個很好用的設計。
links{
position: absolute;  
top: 0px;
right: -250px;  
-webkit-transition: right 0.5s ease-out;  
-moz-transition: right 0.5s ease-out;  
-o-transition: right 0.5s ease-out;
transition: right 0.5s ease-out;
}
#links:hover{
right: 0px;  
}
body{
overflow-x: hidden;

側欄有分側欄1(#links-row-1)與側欄2(#links-row-2),若只想將其中一個側欄變成伸縮側欄,可將以上語法#links 改成 #links-row-1 或 #links-row-2 就可以了。另外要注意到這邊有選單的話,建議在側欄多出的那一小角設一個背景圖上面有提示文字。

下一篇我將介紹互動式CSS按鈕動畫的應用ㄛ!


上一篇
Day12 hover應用(一)
下一篇
Day14 互動式CSS按鈕動畫(上)
系列文
30天學網頁設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言